<template>
  <div class="app-container">
    <div>
      <el-row>
        <el-col :span="15">
          <el-form>
            <el-form-item :label="road_name">
              <el-select
                v-model="road_value"
                placeholder="请选择"
                @change="handleRodeChange"
              >
                <el-option
                  v-for="item in road_options"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="3">
          <el-form>
            <el-form-item>
              <el-dropdown>
                <span class="el-dropdown-link">
                  自动策略({{ autoStrategyCount }})
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu
                  slot="dropdown"
                  style="max-height: 300px; overflow: auto"
                >
                  <el-dropdown-item
                    @click.native="doHandle(item.id, item.name)"
                    v-for="item in autoStrategyList"
                    :key="item.id"
                    >{{ item.name }}({{ item.desc }})</el-dropdown-item
                  >
                </el-dropdown-menu>
              </el-dropdown>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="3">
          <el-form>
            <el-form-item>
              <el-dropdown>
                <span class="el-dropdown-link">
                  拥堵路段({{ trafficFlowCount }})
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu
                  slot="dropdown"
                  style="max-height: 300px; overflow: auto"
                >
                  <el-dropdown-item
                    v-for="item in trafficFlowList"
                    :key="item.id"
                    >{{ item.roadName }}</el-dropdown-item
                  >
                </el-dropdown-menu>
              </el-dropdown>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="3">
          <el-form>
            <el-form-item>
              <el-dropdown>
                <span class="el-dropdown-link">
                  设备异常({{ errorterminalCount }})
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu
                  slot="dropdown"
                  style="max-height: 300px; overflow: auto"
                >
                  <el-dropdown-item
                    v-for="item in errorterminalList"
                    :key="item.id"
                    >{{ item.name }}({{ item.desc }})({{
                      searchByDropDownItem(
                        item.status + "_TerminalStatusEnum"
                      )[0].name
                    }})

                    <!-- <div v-if="item.name">
                  <span>{{ item.name }}</span>
                </div>
              </div> -->
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <el-row type="flex" align="middle">
        <el-col :span="15">
          <p style="font-size: 20px">当前道路：{{ currentroad }}</p>
        </el-col>
        <!-- <el-col :span="3">
          <el-button size="small" type="primary" @click="roadManage"
            >车道管理</el-button
          >
        </el-col> -->
        <el-col :span="3">
          <el-button size="small" type="primary" @click="gotoStrategy"
            >策略管理</el-button
          >
        </el-col>
        <el-col :span="3">
          <el-button size="small" type="primary" @click="gotoLog"
            >操作日志</el-button
          >
        </el-col>
      </el-row>
    </div>
    <el-tabs v-model="activeName" @tab-click="switchClick">
      <el-tab-pane label="正在运行的策略" name="first">
        <el-table
          :data="runningStrategyTableData"
          :header-cell-style="{ 'text-align': 'center' }"
          border
          style="width: 100%"
        >
          <el-table-column
            prop="id"
            label="策略id"
            min-width="5%"
            v-if="false"
          ></el-table-column>
          <el-table-column
            prop="name"
            label="策略名称"
            min-width="20%"
          ></el-table-column>
          <el-table-column
            prop="desc"
            label="策略备注"
            min-width="30%"
          ></el-table-column>
          <el-table-column prop="rule" label="执行规律" min-width="10%">
            <template slot-scope="scope">
              <p v-if="scope.row.rule == 'DAILY'">每天</p>
              <p
                slot-scope="scope"
                v-else-if="scope.row.rule == 'APPOINTED_DATE'"
              >
                指定时间
              </p>
              <p
                slot-scope="scope"
                v-else-if="scope.row.rule == 'DAILY_FOR_WORKDAY'"
              >
                周一到周五
              </p>
              <p
                slot-scope="scope"
                v-else-if="scope.row.rule == 'DAILY_FOR_WEEKEND'"
              >
                周六周日
              </p>
              <p slot-scope="scope" v-else-if="scope.row.rule == 'MANUAL'">
                手动
              </p>
            </template>
          </el-table-column>
          <el-table-column
            prop="executeDate,executeTime"
            label="执行时间"
            min-width="10%"
          >
            <template slot-scope="scope"
              >{{ scope.row.executeDate }} {{ scope.row.executeTime }}</template
            >
          </el-table-column>
          <!-- <el-table-column
            prop="nextExecuteTime"
            label="下一次执行时间"
            min-width="10%"
          >
            <template slot-scope="scope">
              {{ parseTime(scope.row.nextExecuteTime) }}
            </template>
          </el-table-column> -->
          <el-table-column prop="type" label="策略类型" min-width="5%">
            <template slot-scope="scope">
              <p v-if="scope.row.type == 'CRON'">定时策略</p>
              <p v-else-if="scope.row.type == 'MANUAL'">手动策略</p>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态" min-width="5%">
            <template slot-scope="scope">
              <p v-if="scope.row.status == 'STOP'">停止</p>
              <p slot-scope="scope" v-else-if="scope.row.status == 'RUNNING'">
                执行中
              </p>
              <p slot-scope="scope" v-else-if="scope.row.status == 'START'">
                运行
              </p>
              <p
                slot-scope="scope"
                v-else-if="scope.row.status == 'COMMANDING'"
              >
                命令下发中
              </p>
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            min-width="20%"
            align="center"
          >
            <template slot-scope="scope">
              <el-button
                @click="
                  executeCommand(scope.row.id, null, 'END', scope.row.status)
                "
                type="text"
                size="small"
                v-if="
                  scope.row.status == 'RUNNING' ||
                  scope.row.status == 'START' ||
                  scope.row.status == 'COMMANDING'
                "
                >暂停</el-button
              >
              <el-button
                @click="executeCommand(scope.row.id, null, 'START', null)"
                type="text"
                size="small"
                v-if="scope.row.status == 'STOP'"
                >启动</el-button
              >
              <el-button
                type="text"
                size="small"
                v-if="
                  scope.row.status == 'START' &&
                  scope.row.status != 'RUNNING' &&
                  scope.row.status != 'COMMANDING'
                "
                @click="executeCommand(scope.row.id, null, 'EXECUTE_NOW', null)"
                >立即执行</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="即将运行的策略" name="second">
        <el-table
          :data="nextStrategyTableData"
          :header-cell-style="{ 'text-align': 'center' }"
          border
          style="width: 100%"
        >
          <el-table-column
            prop="id"
            label="策略id"
            min-width="5%"
            v-if="false"
          ></el-table-column>
          <el-table-column
            prop="name"
            label="策略名称"
            min-width="20%"
          ></el-table-column>
          <el-table-column
            prop="desc"
            label="策略备注"
            min-width="30%"
          ></el-table-column>
          <el-table-column prop="rule" label="执行规律" min-width="10%">
            <template slot-scope="scope">
              <p v-if="scope.row.rule == 'DAILY'">每天</p>
              <p
                slot-scope="scope"
                v-else-if="scope.row.rule == 'APPOINTED_DATE'"
              >
                指定时间
              </p>
              <p
                slot-scope="scope"
                v-else-if="scope.row.rule == 'DAILY_FOR_WORKDAY'"
              >
                周一到周五
              </p>
              <p
                slot-scope="scope"
                v-else-if="scope.row.rule == 'DAILY_FOR_WEEKEND'"
              >
                周六周日
              </p>
              <p slot-scope="scope" v-else-if="scope.row.rule == 'MANUAL'">
                手动
              </p>
            </template>
          </el-table-column>
          <el-table-column
            prop="executeDate,executeTime"
            label="执行时间"
            min-width="10%"
          >
            <template slot-scope="scope"
              >{{ scope.row.executeDate }} {{ scope.row.executeTime }}</template
            >
          </el-table-column>
          <el-table-column
            prop="nextExecuteTime"
            label="下一次执行时间"
            min-width="10%"
          >
            <template slot-scope="scope">
              {{ parseTime(scope.row.nextExecuteTime) }}
            </template>
          </el-table-column>
          <el-table-column prop="type" label="策略类型" min-width="5%">
            <template slot-scope="scope">
              <p v-if="scope.row.type == 'CRON'">定时策略</p>
              <p v-else-if="scope.row.type == 'MANUAL'">手动策略</p>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态" min-width="5%">
            <template slot-scope="scope">
              <p v-if="scope.row.status == 'STOP'">停止</p>
              <p slot-scope="scope" v-else-if="scope.row.status == 'RUNNING'">
                执行中
              </p>
              <p slot-scope="scope" v-else-if="scope.row.status == 'START'">
                运行
              </p>
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            min-width="20%"
            align="center"
          >
            <template slot-scope="scope">
              <el-button
                @click="
                  executeCommand(scope.row.id, null, 'END', scope.row.status)
                "
                type="text"
                size="small"
                v-if="
                  scope.row.status == 'RUNNING' || scope.row.status == 'START'
                "
                >暂停</el-button
              >
              <el-button
                @click="executeCommand(scope.row.id, null, 'START', null)"
                type="text"
                size="small"
                v-if="scope.row.status == 'STOP'"
                >启动</el-button
              >
              <el-button
                type="text"
                size="small"
                v-if="
                  scope.row.status == 'START' &&
                  scope.row.status != 'RUNNING' &&
                  scope.row.status != 'COMMANDING'
                "
                @click="executeCommand(scope.row.id, null, 'EXECUTE_NOW', null)"
                >立即执行</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="当天需要执行的全部策略" name="third">
        <el-table
          :data="allStrategyTableData"
          :header-cell-style="{ 'text-align': 'center' }"
          border
          style="width: 100%"
        >
          <el-table-column
            prop="id"
            label="策略id"
            min-width="5%"
            v-if="false"
          ></el-table-column>
          <el-table-column
            prop="name"
            label="策略名称"
            min-width="20%"
          ></el-table-column>
          <el-table-column
            prop="desc"
            label="策略备注"
            min-width="30%"
          ></el-table-column>
          <el-table-column prop="rule" label="执行规律" min-width="10%">
            <template slot-scope="scope">
              <p v-if="scope.row.rule == 'DAILY'">每天</p>
              <p
                slot-scope="scope"
                v-else-if="scope.row.rule == 'APPOINTED_DATE'"
              >
                指定时间
              </p>
              <p
                slot-scope="scope"
                v-else-if="scope.row.rule == 'DAILY_FOR_WORKDAY'"
              >
                周一到周五
              </p>
              <p
                slot-scope="scope"
                v-else-if="scope.row.rule == 'DAILY_FOR_WEEKEND'"
              >
                周六周日
              </p>
              <p slot-scope="scope" v-else-if="scope.row.rule == 'MANUAL'">
                手动
              </p>
            </template>
          </el-table-column>
          <el-table-column
            prop="executeDate,executeTime"
            label="执行时间"
            min-width="10%"
          >
            <template slot-scope="scope"
              >{{ scope.row.executeDate }} {{ scope.row.executeTime }}</template
            >
          </el-table-column>
          <el-table-column
            prop="nextExecuteTime"
            label="下一次执行时间"
            min-width="10%"
          >
            <template slot-scope="scope">
              {{ parseTime(scope.row.nextExecuteTime) }}
            </template>
          </el-table-column>
          <el-table-column prop="type" label="策略类型" min-width="5%">
            <template slot-scope="scope">
              <p v-if="scope.row.type == 'CRON'">定时策略</p>
              <p v-else-if="scope.row.type == 'MANUAL'">手动策略</p>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态" min-width="5%">
            <template slot-scope="scope">
              <p v-if="scope.row.status == 'STOP'">停止</p>
              <p slot-scope="scope" v-else-if="scope.row.status == 'RUNNING'">
                执行中
              </p>
              <p slot-scope="scope" v-else-if="scope.row.status == 'START'">
                运行
              </p>
              <p
                slot-scope="scope"
                v-else-if="scope.row.status == 'COMMANDING'"
              >
                命令下发中
              </p>
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            min-width="20%"
            align="center"
          >
            <template slot-scope="scope">
              <el-button
                @click="
                  executeCommand(scope.row.id, null, 'END', scope.row.status)
                "
                type="text"
                size="small"
                v-if="
                  scope.row.status == 'RUNNING' || scope.row.status == 'START'
                "
                >暂停</el-button
              >
              <el-button
                @click="executeCommand(scope.row.id, null, 'START', null)"
                type="text"
                size="small"
                v-if="scope.row.status == 'STOP'"
                >启动</el-button
              >
              <el-button
                type="text"
                size="small"
                v-if="
                  scope.row.status == 'START' &&
                  scope.row.status != 'RUNNING' &&
                  scope.row.status != 'COMMANDING'
                "
                @click="executeCommand(scope.row.id, null, 'EXECUTE_NOW', null)"
                >立即执行</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
    <div class="box">
      <img class="bg" :src="dashboardPic" alt="" />
      <img
        v-if="YHBL_HCDL_CQL_44_pic == 'M'"
        class="road4"
        :src="road41Pic"
        alt=""
      />
      <img
        v-if="YHBL_HCDL_CQL_44_pic == 'T'"
        class="road4"
        :src="road42Pic"
        alt=""
      />
      <img
        class="YHBL_HCDL_CQL_PRES_1"
        alt=""
        :src="YHBL_HCDL_CQL_PRES_1_pic"
      />
      <img
        class="YHBL_HCDL_CQL_PRES_2"
        alt=""
        :src="YHBL_HCDL_CQL_PRES_2_pic"
      />
      <img
        class="YHBL_HCDL_CQL_PRES_3"
        alt=""
        :src="YHBL_HCDL_CQL_PRES_3_pic"
      />
      <img class="YHBL_HCDL_CQL_LED_2" alt="" :src="YHBL_HCDL_CQL_LED_2_pic" />
      <img class="YHBL_HCDL_CQL_LED_3" alt="" :src="YHBL_HCDL_CQL_LED_3_pic" />
      <img class="YHBL_HCDL_CQL_LED_4" alt="" :src="YHBL_HCDL_CQL_LED_4_pic" />
      <img class="YHBL_HCDL_CQL_LED_5" alt="" :src="YHBL_HCDL_CQL_LED_5_pic" />
      <img class="YHBL_HCDL_CQL_LED_6" alt="" :src="YHBL_HCDL_CQL_LED_6_pic" />
      <img class="YHBL_HCDL_CQL_LED_7" alt="" :src="YHBL_HCDL_CQL_LED_7_pic" />
      <img class="YHBL_HCDL_CQL_LED_8" alt="" :src="YHBL_HCDL_CQL_LED_8_pic" />
      <img class="YHBL_HCDL_CQL_LED_9" alt="" :src="YHBL_HCDL_CQL_LED_9_pic" />
      <img
        class="YHBL_HCDL_CQL_LED_10"
        alt=""
        :src="YHBL_HCDL_CQL_LED_10_pic"
      />
      <img
        class="YHBL_HCDL_CQL_LED_11"
        alt=""
        :src="YHBL_HCDL_CQL_LED_11_pic"
      />
      <img
        class="YHBL_HCDL_CQL_LED_12"
        alt=""
        :src="YHBL_HCDL_CQL_LED_12_pic"
      />
      <img
        class="YHBL_HCDL_CQL_LED_13"
        alt=""
        :src="YHBL_HCDL_CQL_LED_13_pic"
      />
      <img
        class="YHBL_HCDL_CQL_LED_14"
        alt=""
        :src="YHBL_HCDL_CQL_LED_14_pic"
      />
      <img
        class="YHBL_HCDL_CQL_LED_15"
        alt=""
        :src="YHBL_HCDL_CQL_LED_15_pic"
      />
      <img
        class="YHBL_HCDL_CQL_LED_16"
        alt=""
        :src="YHBL_HCDL_CQL_LED_16_pic"
      />
      <img
        class="YHBL_HCDL_CQL_LED_17"
        alt=""
        :src="YHBL_HCDL_CQL_LED_17_pic"
      />
      <img
        class="YHBL_HCDL_CQL_LED_18"
        alt=""
        :src="YHBL_HCDL_CQL_LED_18_pic"
      />
      <img
        class="YHBL_HCDL_CQL_LED_19"
        alt=""
        :src="YHBL_HCDL_CQL_LED_19_pic"
      />
      <img
        class="YHBL_HCDL_CQL_LED_20"
        alt=""
        :src="YHBL_HCDL_CQL_LED_20_pic"
      />
      <img
        class="YHBL_HCDL_CQL_LED_21"
        alt=""
        :src="YHBL_HCDL_CQL_LED_21_pic"
      />
      <img
        class="YHBL_HCDL_CQL_LED_22"
        alt=""
        :src="YHBL_HCDL_CQL_LED_22_pic"
      />
      <img
        class="YHBL_HCDL_CQL_LED_23"
        alt=""
        :src="YHBL_HCDL_CQL_LED_23_pic"
      />
      <img
        class="YHBL_HCDL_CQL_LED_24"
        alt=""
        :src="YHBL_HCDL_CQL_LED_24_pic"
      />
      <img
        class="YHBL_HCDL_CQL_LED_27"
        alt=""
        :src="YHBL_HCDL_CQL_LED_27_pic"
      />
      <img
        class="YHBL_HCDL_CQL_LED_28"
        alt=""
        :src="YHBL_HCDL_CQL_LED_28_pic"
      />
      <img
        class="YHBL_HCDL_CQL_LED_29"
        alt=""
        :src="YHBL_HCDL_CQL_LED_29_pic"
      />

      <img
        class="YHBL_HCDL_CQL_S_CTL_1"
        alt=""
        :src="YHBL_HCDL_CQL_S_CTL_1_pic"
      />
      <img class="YHBL_HCDL_CQL_QH_1" alt="" :src="YHBL_HCDL_CQL_QH_1_pic" />
      <img class="YHBL_HCDL_CQL_QH_2" alt="" :src="YHBL_HCDL_CQL_QH_2_pic" />
      <img class="YHBL_HCDL_CQL_QH_3" alt="" :src="lupaiPic" />
      <span
        style="
          position: absolute;
          bottom: 135px;
          left: 160px;
          color: white;
          font-size: 13px;
        "
        >{{ YHBL_HCDL_CQL_S_CTL_1_txt }}</span
      >

      <img
        class="YHBL_HCDL_CQL_S_CTL_2"
        alt=""
        :src="YHBL_HCDL_CQL_S_CTL_2_pic"
      />
      <span
        style="
          position: absolute;
          bottom: 95px;
          left: 160px;
          color: white;
          font-size: 13px;
        "
        >{{ YHBL_HCDL_CQL_S_CTL_2_txt }}</span
      >
      <img
        class="YHBL_HCDL_CQL_C_CTL_1"
        alt=""
        :src="YHBL_HCDL_CQL_C_CTL_1_pic"
      />
      <span
        style="
          position: absolute;
          bottom: 55px;
          left: 160px;
          color: white;
          font-size: 13px;
        "
        >{{ YHBL_HCDL_CQL_C_CTL_1_txt }}</span
      >
      <img
        class="YHBL_HCDL_CQL_C_CTL_2"
        alt=""
        :src="YHBL_HCDL_CQL_C_CTL_2_pic"
      />
      <span
        style="
          position: absolute;
          bottom: 15px;
          left: 160px;
          color: white;
          font-size: 13px;
        "
        >{{ YHBL_HCDL_CQL_C_CTL_2_txt }}</span
      >

      <img
        class="YHBL_HCDL_CQL_C_CTL_3"
        alt=""
        :src="YHBL_HCDL_CQL_C_CTL_3_pic"
      />
      <span
        style="
          position: absolute;
          bottom: 135px;
          left: 320px;
          color: white;
          font-size: 13px;
        "
        >{{ YHBL_HCDL_CQL_C_CTL_3_txt }}</span
      >

      <img
        class="YHBL_HCDL_CQL_C_CTL_4"
        alt=""
        :src="YHBL_HCDL_CQL_C_CTL_4_pic"
      />
      <span
        style="
          position: absolute;
          bottom: 95px;
          left: 320px;
          color: white;
          font-size: 13px;
        "
        >{{ YHBL_HCDL_CQL_C_CTL_4_txt }}</span
      >

      <img
        class="YHBL_HCDL_CQL_CAMERA_1"
        alt=""
        :src="YHBL_HCDL_CQL_CAMERA_1_pic"
      />
      <span
        style="
          position: absolute;
          top: 85px;
          left: 520px;
          color: white;
          font-size: 13px;
        "
        >{{ YHBL_HCDL_CQL_CAMERA_1_txt }}</span
      >
      <img
        class="YHBL_HCDL_CQL_CAMERA_2"
        alt=""
        :src="YHBL_HCDL_CQL_CAMERA_2_pic"
      />
      <span
        style="
          position: absolute;
          top: 85px;
          left: 1410px;
          color: white;
          font-size: 13px;
          width: 300px;
        "
        >{{ YHBL_HCDL_CQL_CAMERA_2_txt }}</span
      >
      <img
        class="YHBL_HCDL_CQL_CAMERA_3"
        alt=""
        :src="YHBL_HCDL_CQL_CAMERA_3_pic"
      />
      <span
        style="
          position: absolute;
          top: 85px;
          left: 2300px;
          color: white;
          font-size: 13px;
          width: 300px;
        "
        >{{ YHBL_HCDL_CQL_CAMERA_3_txt }}</span
      >
      <img
        class="YHBL_HCDL_CQL_CAMERA_4"
        alt=""
        :src="YHBL_HCDL_CQL_CAMERA_4_pic"
      />
      <span
        style="
          position: absolute;
          top: 85px;
          left: 3430px;
          color: white;
          font-size: 13px;
          width: 300px;
        "
        >{{ YHBL_HCDL_CQL_CAMERA_4_txt }}</span
      >
      <span
        @click="getCdyd('YHBL_HCDL_CQL_11')"
        v-if="YHBL_HCDL_CQL_11_pic == 'B'"
        style="
          cursor: pointer;
          position: absolute;
          top: 165px;
          left: 520px;
          width: 880px;
          height: 45px;
          z-index: 100;
        "
      ></span>
      <span
        @click="getCdyd('YHBL_HCDL_CQL_11')"
        v-if="YHBL_HCDL_CQL_11_pic == 'M'"
        style="
          cursor: pointer;
          position: absolute;
          top: 165px;
          left: 520px;
          background: rgb(255, 241, 0);
          width: 880px;
          height: 45px;
          z-index: 100;
        "
      ></span>
      <span
        @click="getCdyd('YHBL_HCDL_CQL_11')"
        v-if="YHBL_HCDL_CQL_11_pic == 'T'"
        style="
          cursor: pointer;
          position: absolute;
          top: 165px;
          left: 520px;
          background: rgb(230, 0, 18);
          width: 880px;
          height: 45px;
          z-index: 100;
        "
      ></span>
      <span
        @click="getCdyd('YHBL_HCDL_CQL_12')"
        v-if="YHBL_HCDL_CQL_12_pic == 'B'"
        style="
          cursor: pointer;
          position: absolute;
          top: 230px;
          left: 520px;
          width: 880px;
          height: 45px;
          z-index: 100;
        "
      ></span>
      <span
        @click="getCdyd('YHBL_HCDL_CQL_12')"
        v-if="YHBL_HCDL_CQL_12_pic == 'M'"
        style="
          cursor: pointer;
          position: absolute;
          top: 230px;
          left: 520px;
          background: rgb(255, 241, 0);
          width: 880px;
          height: 45px;
          z-index: 100;
        "
      ></span>
      <span
        @click="getCdyd('YHBL_HCDL_CQL_12')"
        v-if="YHBL_HCDL_CQL_12_pic == 'T'"
        style="
          cursor: pointer;
          position: absolute;
          top: 230px;
          left: 520px;
          background: rgb(230, 0, 18);
          width: 880px;
          height: 45px;
          z-index: 100;
        "
      ></span>

      <span
        @click="getCdyd('YHBL_HCDL_CQL_13')"
        v-if="YHBL_HCDL_CQL_13_pic == 'B'"
        style="
          cursor: pointer;
          position: absolute;
          top: 290px;
          left: 520px;
          width: 880px;
          height: 45px;
          z-index: 100;
        "
      ></span>
      <span
        @click="getCdyd('YHBL_HCDL_CQL_13')"
        v-if="YHBL_HCDL_CQL_13_pic == 'M'"
        style="
          cursor: pointer;
          position: absolute;
          top: 290px;
          left: 520px;
          background: rgb(255, 241, 0);
          width: 880px;
          height: 45px;
          z-index: 100;
        "
      ></span>
      <span
        @click="getCdyd('YHBL_HCDL_CQL_13')"
        v-if="YHBL_HCDL_CQL_13_pic == 'T'"
        style="
          cursor: pointer;
          position: absolute;
          top: 290px;
          left: 520px;
          background: rgb(230, 0, 18);
          width: 880px;
          height: 45px;
          z-index: 100;
        "
      ></span>
      <span
        @click="getCdyd('YHBL_HCDL_CQL_21')"
        v-if="YHBL_HCDL_CQL_21_pic == 'B'"
        style="
          cursor: pointer;
          position: absolute;
          top: 165px;
          left: 1415px;
          width: 875px;
          height: 45px;
          z-index: 100;
        "
      ></span>
      <span
        @click="getCdyd('YHBL_HCDL_CQL_21')"
        v-if="YHBL_HCDL_CQL_21_pic == 'M'"
        style="
          cursor: pointer;
          position: absolute;
          top: 165px;
          left: 1415px;
          background: rgb(255, 241, 0);
          width: 875px;
          height: 45px;
          z-index: 100;
        "
      ></span>
      <span
        @click="getCdyd('YHBL_HCDL_CQL_21')"
        v-if="YHBL_HCDL_CQL_21_pic == 'T'"
        style="
          cursor: pointer;
          position: absolute;
          top: 165px;
          left: 1407px;
          background: rgb(230, 0, 18);
          width: 885px;
          height: 45px;
          z-index: 100;
        "
      ></span>

      <span
        @click="getCdyd('YHBL_HCDL_CQL_22')"
        v-if="YHBL_HCDL_CQL_22_pic == 'B'"
        style="
          cursor: pointer;
          position: absolute;
          top: 230px;
          left: 1407px;
          width: 885px;
          height: 45px;
          z-index: 100;
        "
      ></span>

      <span
        @click="getCdyd('YHBL_HCDL_CQL_22')"
        v-if="YHBL_HCDL_CQL_22_pic == 'M'"
        style="
          cursor: pointer;
          position: absolute;
          top: 230px;
          left: 1407px;
          background: rgb(255, 241, 0);
          width: 885px;
          height: 45px;
          z-index: 100;
        "
      ></span>
      <span
        @click="getCdyd('YHBL_HCDL_CQL_22')"
        v-if="YHBL_HCDL_CQL_22_pic == 'T'"
        style="
          cursor: pointer;
          position: absolute;
          top: 230px;
          left: 1407px;
          background: rgb(230, 0, 18);
          width: 885px;
          height: 45px;
          z-index: 100;
        "
      ></span>

      <span
        @click="getCdyd('YHBL_HCDL_CQL_23')"
        v-if="YHBL_HCDL_CQL_23_pic == 'B'"
        style="
          cursor: pointer;
          position: absolute;
          top: 290px;
          left: 1407px;
          width: 885px;
          height: 45px;
          z-index: 100;
        "
      ></span>

      <span
        @click="getCdyd('YHBL_HCDL_CQL_23')"
        v-if="YHBL_HCDL_CQL_23_pic == 'M'"
        style="
          cursor: pointer;
          position: absolute;
          top: 290px;
          left: 1407px;
          background: rgb(255, 241, 0);
          width: 885px;
          height: 45px;
          z-index: 100;
        "
      ></span>
      <span
        @click="getCdyd('YHBL_HCDL_CQL_23')"
        v-if="YHBL_HCDL_CQL_23_pic == 'T'"
        style="
          cursor: pointer;
          position: absolute;
          top: 290px;
          left: 1407px;
          background: rgb(230, 0, 18);
          width: 885px;
          height: 45px;
          z-index: 100;
        "
      ></span>
      <span
        @click="getCdyd('YHBL_HCDL_CQL_31')"
        v-if="YHBL_HCDL_CQL_31_pic == 'B'"
        style="
          cursor: pointer;
          position: absolute;
          top: 165px;
          left: 2298px;
          width: 875px;
          height: 45px;
          z-index: 100;
        "
      ></span>
      <span
        @click="getCdyd('YHBL_HCDL_CQL_31')"
        v-if="YHBL_HCDL_CQL_31_pic == 'M'"
        style="
          cursor: pointer;
          position: absolute;
          top: 165px;
          left: 2298px;
          background: rgb(255, 241, 0);
          width: 875px;
          height: 45px;
          z-index: 100;
        "
      ></span>
      <span
        @click="getCdyd('YHBL_HCDL_CQL_31')"
        v-if="YHBL_HCDL_CQL_31_pic == 'T'"
        style="
          cursor: pointer;
          position: absolute;
          top: 165px;
          left: 2298px;
          background: rgb(230, 0, 18);
          width: 875px;
          height: 45px;
          z-index: 100;
        "
      ></span>
      <span
        @click="getCdyd('YHBL_HCDL_CQL_32')"
        v-if="YHBL_HCDL_CQL_32_pic == 'B'"
        style="
          cursor: pointer;
          position: absolute;
          top: 230px;
          left: 2298px;
          width: 875px;
          height: 45px;
          z-index: 100;
        "
      ></span>
      <span
        @click="getCdyd('YHBL_HCDL_CQL_32')"
        v-if="YHBL_HCDL_CQL_32_pic == 'M'"
        style="
          cursor: pointer;
          position: absolute;
          top: 230px;
          left: 2298px;
          background: rgb(255, 241, 0);
          width: 875px;
          height: 45px;
          z-index: 100;
        "
      ></span>
      <span
        @click="getCdyd('YHBL_HCDL_CQL_32')"
        v-if="YHBL_HCDL_CQL_32_pic == 'T'"
        style="
          cursor: pointer;
          position: absolute;
          top: 230px;
          left: 2298px;
          background: rgb(230, 0, 18);
          width: 875px;
          height: 45px;
          z-index: 100;
        "
      ></span>

      <span
        @click="getCdyd('YHBL_HCDL_CQL_33')"
        v-if="YHBL_HCDL_CQL_33_pic == 'B'"
        style="
          cursor: pointer;
          position: absolute;
          top: 290px;
          left: 2298px;
          width: 875px;
          height: 45px;
          z-index: 100;
        "
      ></span>
      <span
        @click="getCdyd('YHBL_HCDL_CQL_33')"
        v-if="YHBL_HCDL_CQL_33_pic == 'M'"
        style="
          cursor: pointer;
          position: absolute;
          top: 290px;
          left: 2298px;
          background: rgb(255, 241, 0);
          width: 875px;
          height: 45px;
          z-index: 100;
        "
      ></span>
      <span
        @click="getCdyd('YHBL_HCDL_CQL_33')"
        v-if="YHBL_HCDL_CQL_33_pic == 'T'"
        style="
          cursor: pointer;
          position: absolute;
          top: 290px;
          left: 2298px;
          background: rgb(230, 0, 18);
          width: 875px;
          height: 45px;
          z-index: 100;
        "
      ></span>

      <span
        @click="getCdyd('YHBL_HCDL_CQL_41')"
        v-if="YHBL_HCDL_CQL_41_pic == 'B'"
        style="
          cursor: pointer;
          position: absolute;
          top: 165px;
          left: 3175px;
          width: 320px;
          height: 45px;
          z-index: 100;
        "
      ></span>

      <span
        @click="getCdyd('YHBL_HCDL_CQL_41')"
        v-if="YHBL_HCDL_CQL_41_pic == 'M'"
        style="
          cursor: pointer;
          position: absolute;
          top: 165px;
          left: 3175px;
          background: rgb(255, 241, 0);
          width: 320px;
          height: 45px;
          z-index: 100;
        "
      ></span>
      <span
        @click="getCdyd('YHBL_HCDL_CQL_41')"
        v-if="YHBL_HCDL_CQL_41_pic == 'T'"
        style="
          cursor: pointer;
          position: absolute;
          top: 165px;
          left: 3175px;
          background: rgb(230, 0, 18);
          width: 320px;
          height: 45px;
          z-index: 100;
        "
      ></span>

      <span
        @click="getCdyd('YHBL_HCDL_CQL_42')"
        v-if="YHBL_HCDL_CQL_42_pic == 'B'"
        style="
          cursor: pointer;
          position: absolute;
          top: 230px;
          left: 3175px;
          width: 320px;
          height: 45px;
          z-index: 100;
        "
      ></span>

      <span
        @click="getCdyd('YHBL_HCDL_CQL_42')"
        v-if="YHBL_HCDL_CQL_42_pic == 'M'"
        style="
          cursor: pointer;
          position: absolute;
          top: 230px;
          left: 3175px;
          background: rgb(255, 241, 0);
          width: 320px;
          height: 45px;
          z-index: 100;
        "
      ></span>
      <span
        @click="getCdyd('YHBL_HCDL_CQL_42')"
        v-if="YHBL_HCDL_CQL_42_pic == 'T'"
        style="
          cursor: pointer;
          position: absolute;
          top: 230px;
          left: 3175px;
          background: rgb(230, 0, 18);
          width: 320px;
          height: 45px;
          z-index: 100;
        "
      ></span>

      <span
        @click="getCdyd('YHBL_HCDL_CQL_43')"
        v-if="YHBL_HCDL_CQL_43_pic == 'B'"
        style="
          cursor: pointer;
          position: absolute;
          top: 290px;
          left: 3175px;
          width: 320px;
          height: 45px;
          z-index: 100;
        "
      ></span>

      <span
        @click="getCdyd('YHBL_HCDL_CQL_43')"
        v-if="YHBL_HCDL_CQL_43_pic == 'M'"
        style="
          cursor: pointer;
          position: absolute;
          top: 290px;
          left: 3175px;
          background: rgb(255, 241, 0);
          width: 320px;
          height: 45px;
          z-index: 100;
        "
      ></span>
      <span
        @click="getCdyd('YHBL_HCDL_CQL_43')"
        v-if="YHBL_HCDL_CQL_43_pic == 'T'"
        style="
          cursor: pointer;
          position: absolute;
          top: 290px;
          left: 3175px;
          background: rgb(230, 0, 18);
          width: 320px;
          height: 45px;
          z-index: 100;
        "
      ></span>

      <span
        @click="getCdyd('YHBL_HCDL_CQL_44')"
        v-if="YHBL_HCDL_CQL_44_pic == 'B'"
        style="
          cursor: pointer;
          position: absolute;
          top: 360px;
          left: 3175px;
          width: 320px;
          height: 45px;
          z-index: 100;
        "
      ></span>

      <span
        @click="getCdyd('YHBL_HCDL_CQL_44')"
        v-if="YHBL_HCDL_CQL_44_pic == 'M'"
        style="
          cursor: pointer;
          position: absolute;
          top: 360px;
          left: 3175px;
          background: rgb(255, 241, 0);
          width: 320px;
          height: 45px;
          z-index: 100;
        "
      ></span>
      <span
        @click="getCdyd('YHBL_HCDL_CQL_44')"
        v-if="YHBL_HCDL_CQL_44_pic == 'T'"
        style="
          cursor: pointer;
          position: absolute;
          top: 360px;
          left: 3175px;
          background: rgb(230, 0, 18);
          width: 320px;
          height: 45px;
          z-index: 100;
        "
      ></span>
    </div>
    <div>
      <el-button type="text" @click="openDetails">图标说明</el-button>
    </div>
    <el-dialog title :visible.sync="dialogChooseStrategyVisible">
      <el-form
        label-position="left"
        label-width="120px"
        style="margin-left: 50px"
      >
        <div style="margin-bottom: 20px">
          <span style="font-size: 20px">当前执行的策略</span>
        </div>
        <!-- <el-form-item label="等待执行的策略" label-width="120px" size="medium"></el-form-item> -->
        <el-form-item label="名称">{{ currentStrategyForm.name }}</el-form-item>
        <el-form-item label="备注">{{ currentStrategyForm.desc }}</el-form-item>
        <div class="link-top"></div>
        <div style="margin-bottom: 20px; margin-top: 20px">
          <span style="font-size: 20px">等待执行的策略</span>
        </div>
        <el-form-item label="名称">{{ waitingStrategyForm.name }}</el-form-item>
        <el-form-item label="备注">{{ waitingStrategyForm.desc }}</el-form-item>
        <el-form-item label="剩余时间">{{
          waitingStrategyForm.remainingTime
        }}</el-form-item>
        <div class="dialog-footer">
          <el-button
            type="primary"
            @click="
              executeCommand(
                currentStrategyForm.id,
                waitingStrategyForm.id,
                'END',
                null
              )
            "
            >确定并执行该策略</el-button
          >
          <el-button @click="dialogChooseStrategyVisible = false"
            >取 消</el-button
          >
        </div>
        <div class="link-top"></div>
        <div style="margin-bottom: 20px; margin-top: 20px">
          <span style="font-size: 20px">即将执行的策略</span>
        </div>
        <el-form-item label="名称">{{ nextStrategyForm.name }}</el-form-item>
        <el-form-item label="备注">{{ nextStrategyForm.desc }}</el-form-item>
        <el-form-item label="下一次执行时间">{{
          nextStrategyForm.nextExecuteTime
            ? parseTime(nextStrategyForm.nextExecuteTime)
            : null
        }}</el-form-item>
        <div class="dialog-footer">
          <el-button
            type="primary"
            @click="executeCommand(currentStrategyForm.id, null, 'END', null)"
            >确定并执行该策略</el-button
          >
          <el-button @click="dialogChooseStrategyVisible = false"
            >取 消</el-button
          >
        </div>
      </el-form>
    </el-dialog>
    <el-dialog
      title="车道管理"
      :visible.sync="dialogRoadManageVisible"
      width="1200px"
    >
      <el-form :model="roadData" ref="roadDataForm">
        <el-table
          :data="roadData.roadManageTableData"
          :header-cell-style="{ 'text-align': 'center' }"
          border
          style="width: 100%"
        >
          <el-table-column
            prop="id"
            label="车道id"
            min-width="20%"
            v-if="false"
          ></el-table-column>
          <el-table-column
            prop="code"
            label="车道名称"
            min-width="15%"
          ></el-table-column>
          <el-table-column
            prop="centerLevel"
            label="黄色拥堵等级"
            min-width="25%"
          >
            <template slot-scope="scope">
              <el-form-item
                :prop="'roadManageTableData.' + scope.$index + '.centerLevel'"
                :rules="roadRules.centerLevel"
              >
                <!-- <el-input
                  v-if="scope.row.isEdit"
                  v-model.number="scope.row.centerLe ve l"
                  placeholder="请输入内容"
                ></el-input> -->
                <el-select
                  v-model="scope.row.centerLevel"
                  placeholder="请选择"
                  v-if="scope.row.isEdit"
                >
                  <el-option
                    v-for="item in centerLevelOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
                <span v-else>{{
                  scope.row.topLevel > 0
                    ? parseOptionJson(scope.row.centerLevel)
                    : 0
                }}</span>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column
            prop="to pLevel"
            label="红色拥堵等级"
            min-width="25%"
          >
            <template slot-scope="scope">
              <el-form-item
                :prop="'roadManageTableData.' + scope.$index + '.topLevel'"
                :rules="roadRules.topLevel"
              >
                <el-select
                  v-model="scope.row.topLevel"
                  placeholder="请选择"
                  v-if="scope.row.isEdit"
                >
                  <el-option
                    v-for="item in topLevelOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
                <span v-else>{{
                  scope.row.topLevel > 0
                    ? parseOptionJson(scope.row.topLevel)
                    : 0
                }}</span>
              </el-form-item>
            </template>
          </el-table-column>

          <el-table-column
            fixed="right"
            label="操作"
            min-width="15%"
            align="center"
          >
            <template slot-scope="scope">
              <el-button
                v-if="!scope.row.isEdit"
                @click="edit(scope.row)"
                type="text"
                size="mini"
                >编辑</el-button
              >
              <el-button
                type="text"
                size="small"
                v-if="scope.row.isEdit"
                @click="save(scope.row)"
                >保存</el-button
              >
              <el-button
                type="text"
                size="small"
                v-if="scope.row.isEdit"
                @click="cancel(scope.row, scope.$index)"
                >取消</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div style="margin-top: 30px; text-align: center">
          <el-button @click="dialogRoadManageVisible = false">关 闭</el-button>
        </div>
      </el-form>
    </el-dialog>

    <el-dialog
      title="说明列表"
      :visible.sync="openDetailsVisible"
      width="800px"
    >
      <el-main
        style="position: relative; z-index: 2100"
        v-loading="listLoadingDialog"
      >
        <el-form>
          <el-table
            :data="openDetailsData"
            :header-cell-style="{ 'text-align': 'center' }"
            border
            style="width: 100%"
          >
            <el-table-column
              prop="title"
              label="名称"
              min-width="30%"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="icon"
              label="图标"
              min-width="30%"
              align="center"
            >
              <template slot-scope="scope">
                <span
                  ><img
                    style="
                      width: 60px;
                      vertical-align: middle;
                      display: inline-block;
                    "
                    :src="scope.row.icon"
                /></span> </template
            ></el-table-column>
            <el-table-column
              prop="typeStr"
              label="类型"
              min-width="40%"
              align="center"
            ></el-table-column>
          </el-table>
          <div style="margin-top: 30px; text-align: center">
            <el-button @click="openDetailsVisible = false">关 闭</el-button>
          </div>
        </el-form>
      </el-main>
    </el-dialog>

    <el-dialog
      title="拥堵阀值列表"
      :visible.sync="trafficFlowLevelVisible"
      width="1000px"
    >
      <el-main
        style="position: relative; z-index: 2100"
        v-loading="listLoadingDialog"
      >
        <el-form :model="roadData" ref="roadDataForm">
          <el-table
            :data="roadData.trafficFlowLevelData"
            :header-cell-style="{ 'text-align': 'center' }"
            border
            style="width: 100%"
          >
            <el-table-column
              prop="id"
              label="ID"
              min-width="12.5%"
              align="center"
              v-if="false"
            ></el-table-column>
            <el-table-column
              prop="terminalLaneCode"
              label="terminalLaneCode"
              min-width="12.5%"
              align="center"
              v-if="false"
            ></el-table-column>
            <el-table-column
              prop="level"
              label="拥堵状态"
              min-width="12.5%"
              align="center"
            >
              <template slot-scope="scope">
                <span v-if="scope.row.level == 'B'">绿色通常</span>
                <span v-if="scope.row.level == 'M'">黄色拥堵</span>
                <span v-if="scope.row.level == 'T'">红色拥堵</span>
              </template>
            </el-table-column>

            <el-table-column
              prop="fromAvgVolume"
              label="每30秒车流量-开始"
              min-width="12.5%"
              align="center"
            >
              <template slot-scope="scope">
                <el-form-item
                  :prop="
                    'trafficFlowLevelData.' + scope.$index + '.fromAvgVolume'
                  "
                >
                  <el-input
                    v-if="scope.row.isEdit"
                    v-model.number="scope.row.fromAvgVolume"
                    placeholder="请输入内容"
                  ></el-input>

                  <span v-else>{{ scope.row.fromAvgVolume }}</span>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column
              prop="toAvgVolume"
              label="每30秒车流量-结束"
              min-width="12.5%"
              align="center"
            >
              <template slot-scope="scope">
                <el-form-item
                  :prop="
                    'trafficFlowLevelData.' + scope.$index + '.toAvgVolume'
                  "
                >
                  <el-input
                    v-if="scope.row.isEdit"
                    v-model.number="scope.row.toAvgVolume"
                    placeholder="请输入内容"
                  ></el-input>

                  <span v-else>{{ scope.row.toAvgVolume }}</span>
                </el-form-item>
              </template>
            </el-table-column>

            <el-table-column
              prop="currentVolume"
              label="当前每30秒车流量"
              min-width="12.5%"
              align="center"
            >
              <template slot-scope="scope">
                <el-form-item
                  :prop="
                    'trafficFlowLevelData.' + scope.$index + '.currentVolume'
                  "
                >
                  <span>{{ scope.row.currentVolume }}</span>
                </el-form-item>
              </template>
            </el-table-column>

            <el-table-column
              prop="fromAvgOccupationRatio"
              label="平均车道占有率-开始"
              min-width="12.5%"
              align="center"
            >
              <template slot-scope="scope">
                <el-form-item
                  :prop="
                    'trafficFlowLevelData.' +
                    scope.$index +
                    '.fromAvgOccupationRatio'
                  "
                >
                  <el-input
                    v-if="scope.row.isEdit"
                    v-model.number="scope.row.fromAvgOccupationRatio"
                    placeholder="请输入内容"
                  ></el-input>

                  <span v-else>{{ scope.row.fromAvgOccupationRatio }}</span>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column
              prop="toAvgOccupationRatio"
              label="平均车道占有率-结束"
              min-width="12.5%"
              align="center"
            >
              <template slot-scope="scope">
                <el-form-item
                  :prop="
                    'trafficFlowLevelData.' +
                    scope.$index +
                    '.toAvgOccupationRatio'
                  "
                >
                  <el-input
                    v-if="scope.row.isEdit"
                    v-model.number="scope.row.toAvgOccupationRatio"
                    placeholder="请输入内容"
                  ></el-input>

                  <span v-else>{{ scope.row.toAvgOccupationRatio }}</span>
                </el-form-item>
              </template>
            </el-table-column>

            <el-table-column
              prop="currentAvgOccupationRatio"
              label="当前平均车道占有率"
              min-width="12.5%"
              align="center"
            >
              <template slot-scope="scope">
                <el-form-item
                  :prop="
                    'trafficFlowLevelData.' +
                    scope.$index +
                    '.currentAvgOccupationRatio'
                  "
                >
                  <span>{{ scope.row.currentAvgOccupationRatio }}</span>
                </el-form-item>
              </template>
            </el-table-column>

            <!-- <el-table-column
              prop="fromOccupationRatio"
              label="车道占有率-开始"
              min-width="12.5%"
              align="center"
            >
              <template slot-scope="scope">
                <el-form-item
                  :prop="
                    'trafficFlowLevelData.' +
                    scope.$index +
                    '.fromOccupationRatio'
                  "
                >
                  <el-input
                    v-if="scope.row.isEdit"
                    v-model.number="scope.row.fromOccupationRatio"
                    placeholder="请输入内容"
                  ></el-input>

                  <span v-else>{{ scope.row.fromOccupationRatio }}</span>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column
              prop="toOccupationRatio"
              label="车道占有率-结束"
              min-width="12.5%"
              align="center"
            >
              <template slot-scope="scope">
                <el-form-item
                  :prop="
                    'trafficFlowLevelData.' +
                    scope.$index +
                    '.toOccupationRatio'
                  "
                >
                  <el-input
                    v-if="scope.row.isEdit"
                    v-model.number="scope.row.toOccupationRatio"
                    placeholder="请输入内容"
                  ></el-input>

                  <span v-else>{{ scope.row.toOccupationRatio }}</span>
                </el-form-item>
              </template>
            </el-table-column> -->

            <el-table-column
              prop="fromWaitingStopCount"
              label="车辆排队长度-开始"
              min-width="12.5%"
              align="center"
            >
              <template slot-scope="scope">
                <el-form-item
                  :prop="
                    'trafficFlowLevelData.' +
                    scope.$index +
                    '.fromWaitingStopCount'
                  "
                >
                  <el-input
                    v-if="scope.row.isEdit"
                    v-model.number="scope.row.fromWaitingStopCount"
                    placeholder="请输入内容"
                  ></el-input>

                  <span v-else>{{ scope.row.fromWaitingStopCount }}</span>
                </el-form-item>
              </template></el-table-column
            >

            <el-table-column
              prop="toWaitingStopCount"
              label="车辆排队长度-结束"
              min-width="12.5%"
              align="center"
            >
              <template slot-scope="scope">
                <el-form-item
                  :prop="
                    'trafficFlowLevelData.' +
                    scope.$index +
                    '.toWaitingStopCount'
                  "
                >
                  <el-input
                    v-if="scope.row.isEdit"
                    v-model.number="scope.row.toWaitingStopCount"
                    placeholder="请输入内容"
                  ></el-input>

                  <span v-else>{{ scope.row.toWaitingStopCount }}</span>
                </el-form-item>
              </template>
            </el-table-column>

            <el-table-column
              prop="currentWaitingStopCount"
              label="当前车辆排队长度"
              min-width="12.5%"
              align="center"
            >
              <template slot-scope="scope">
                <el-form-item
                  :prop="
                    'trafficFlowLevelData.' +
                    scope.$index +
                    '.currentWaitingStopCount'
                  "
                >
                  <span>{{ scope.row.currentWaitingStopCount }}</span>
                </el-form-item>
              </template>
            </el-table-column>

            <el-table-column
              fixed="right"
              label="操作"
              min-width="15%"
              align="center"
            >
              <template slot-scope="scope">
                <el-button
                  v-if="!scope.row.isEdit"
                  @click="edit(scope.row)"
                  type="text"
                  size="mini"
                  >编辑</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  v-if="scope.row.isEdit"
                  @click="save(scope.row)"
                  >保存</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  v-if="scope.row.isEdit"
                  @click="cancel(scope.row, scope.$index)"
                  >取消</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <div style="margin-top: 30px; text-align: center">
            <el-button @click="trafficFlowLevelVisible = false"
              >关 闭</el-button
            >
          </div>
        </el-form>
      </el-main>
    </el-dialog>
  </div>
</template>
<script>
import { default as api } from "../../utils/api";
import { getToken } from "@/utils/auth"; // 验权
import { mapGetters } from "vuex";
export default {
  name: "dashboard",
  data() {
    const numTest = async (rule, value, callback) => {
      // const reg = /^\-\d\.?\d*$/
      // const boolean = reg.test(value)
      const boolean = new RegExp("^[0-9][0-9]*$").test(value); // console.log(boolean)
      if (!boolean) {
        callback(new Error("请输入正整数"));
      }
    };
    return {
      dashboardPic: require("@/image/dashboard/dashboard.png"),
      road41Pic: require("@/image/dashboard/road4-1.png"),
      road42Pic: require("@/image/dashboard/road4-2.png"),
      lupaiPic: require("@/image/dashboard/lupai.png"),
      YHBL_HCDL_CQL_PRES_1_pic: "",
      YHBL_HCDL_CQL_PRES_2_pic: "",
      YHBL_HCDL_CQL_PRES_3_pic: "",
      YHBL_HCDL_CQL_LED_2_pic: "",
      YHBL_HCDL_CQL_LED_3_pic: "",
      YHBL_HCDL_CQL_LED_4_pic: "",
      YHBL_HCDL_CQL_LED_5_pic: "",
      YHBL_HCDL_CQL_LED_6_pic: "",
      YHBL_HCDL_CQL_LED_7_pic: "",
      YHBL_HCDL_CQL_LED_8_pic: "",
      YHBL_HCDL_CQL_LED_9_pic: "",
      YHBL_HCDL_CQL_LED_10_pic: "",
      YHBL_HCDL_CQL_LED_11_pic: "",
      YHBL_HCDL_CQL_LED_12_pic: "",
      YHBL_HCDL_CQL_LED_13_pic: "",
      YHBL_HCDL_CQL_LED_14_pic: "",
      YHBL_HCDL_CQL_LED_15_pic: "",
      YHBL_HCDL_CQL_LED_16_pic: "",
      YHBL_HCDL_CQL_LED_17_pic: "",
      YHBL_HCDL_CQL_LED_18_pic: "",
      YHBL_HCDL_CQL_LED_19_pic: "",
      YHBL_HCDL_CQL_LED_20_pic: "",
      YHBL_HCDL_CQL_LED_21_pic: "",
      YHBL_HCDL_CQL_LED_22_pic: "",
      YHBL_HCDL_CQL_LED_23_pic: "",
      YHBL_HCDL_CQL_LED_24_pic: "",
      YHBL_HCDL_CQL_LED_27_pic: "",
      YHBL_HCDL_CQL_LED_28_pic: "",
      YHBL_HCDL_CQL_LED_29_pic: "",
      YHBL_HCDL_CQL_S_CTL_1_pic: "",
      YHBL_HCDL_CQL_S_CTL_1_txt: "",
      YHBL_HCDL_CQL_S_CTL_2_pic: "",
      YHBL_HCDL_CQL_S_CTL_2_txt: "",
      YHBL_HCDL_CQL_C_CTL_1_pic: "",
      YHBL_HCDL_CQL_C_CTL_1_txt: "",
      YHBL_HCDL_CQL_C_CTL_2_pic: "",
      YHBL_HCDL_CQL_C_CTL_2_txt: "",

      YHBL_HCDL_CQL_C_CTL_3_pic: "",
      YHBL_HCDL_CQL_C_CTL_3_txt: "",

      YHBL_HCDL_CQL_C_CTL_4_pic: "",
      YHBL_HCDL_CQL_C_CTL_4_txt: "",

      YHBL_HCDL_CQL_CAMERA_1_pic: "",
      YHBL_HCDL_CQL_CAMERA_1_txt: "",
      YHBL_HCDL_CQL_CAMERA_2_pic: "",
      YHBL_HCDL_CQL_CAMERA_2_txt: "",
      YHBL_HCDL_CQL_CAMERA_3_pic: "",
      YHBL_HCDL_CQL_CAMERA_3_txt: "",
      YHBL_HCDL_CQL_CAMERA_4_pic: "",
      YHBL_HCDL_CQL_CAMERA_4_txt: "",
      YHBL_HCDL_CQL_11_pic: "",
      YHBL_HCDL_CQL_12_pic: "",
      YHBL_HCDL_CQL_13_pic: "",
      YHBL_HCDL_CQL_21_pic: "",
      YHBL_HCDL_CQL_22_pic: "",
      YHBL_HCDL_CQL_23_pic: "",
      YHBL_HCDL_CQL_31_pic: "",
      YHBL_HCDL_CQL_32_pic: "",
      YHBL_HCDL_CQL_33_pic: "",
      YHBL_HCDL_CQL_41_pic: "",
      YHBL_HCDL_CQL_42_pic: "",
      YHBL_HCDL_CQL_43_pic: "",
      YHBL_HCDL_CQL_44_pic: "",
      YHBL_HCDL_CQL_QH_1_pic: "",
      YHBL_HCDL_CQL_QH_2_pic: "",
      currentroad: "",
      nextStrategyTableData: [], //表格数据初始化
      runningStrategyTableData: [],
      allStrategyTableData: [],
      openDetailsData: [],
      roadData: {
        roadManageTableData: undefined,
        trafficFlowLevelData: undefined,
      },
      roadManageTableData: [],
      road_name: "快速切换到路",
      road_value: "",
      road_options: [],
      listQuery: {
        pageNum: 1, //页码
        pageRow: 20, //每页条数
      },
      totalCount: 0,
      activeName: "first",
      autoStrategyList: [],
      trafficFlowList: [],
      errorterminalList: [],
      allDevices: [],
      allLanes: [],

      autoStrategyCount: 0,
      trafficFlowCount: 0,
      errorterminalCount: 0,
      dialogChooseStrategyVisible: false,
      dialogRoadManageVisible: false,
      openDetailsVisible: false,
      trafficFlowLevelVisible: false,
      listLoadingDialog: false,
      currentStrategyForm: { name: "", desc: "" },
      waitingStrategyForm: {
        id: "",
        name: "",
        desc: "",
        remainingTime: "",
      },
      nextStrategyForm: {
        name: "",
        desc: "",
        nextExecuteTime: "",
      },
      centerLevelOptions: [
        {
          value: 1,
          label: "等级一",
        },
        {
          value: 2,
          label: "等级二",
        },
        {
          value: 3,
          label: "等级三",
        },
        {
          value: 4,
          label: "等级四",
        },
        {
          value: 5,
          label: "等级五",
        },
        {
          value: 6,
          label: "等级六",
        },
        {
          value: 7,
          label: "等级七",
        },
        {
          value: 8,
          label: "等级八",
        },
        {
          value: 9,
          label: "等级九",
        },
        {
          value: 10,
          label: "等级十",
        },
      ],
      topLevelOptions: [
        {
          value: 1,
          label: "等级一",
        },
        {
          value: 2,
          label: "等级二",
        },
        {
          value: 3,
          label: "等级三",
        },
        {
          value: 4,
          label: "等级四",
        },
        {
          value: 5,
          label: "等级五",
        },
        {
          value: 6,
          label: "等级六",
        },
        {
          value: 7,
          label: "等级七",
        },
        {
          value: 8,
          label: "等级八",
        },
        {
          value: 9,
          label: "等级九",
        },
        {
          value: 10,
          label: "等级十",
        },
      ],
      roadRules: {
        fromAvgVolume: [
          // { type: "number", message: "只能输入数字", trigger: "blur" },
          { validator: numTest, trigger: "blur" },
        ],
        toAvgVolume: [
          // { type: "number", message: "只能输入数字", trigger: "blur" },
          { validator: numTest, trigger: "blur" },
        ],
        fromAvgSpeed: [
          // { type: "number", message: "只能输入数字", trigger: "blur" },
          { validator: numTest, trigger: "blur" },
        ],
        toAvgSpeed: [
          // { type: "number", message: "只能输入数字", trigger: "blur" },
          { validator: numTest, trigger: "blur" },
        ],
        fromOccupationRatio: [
          // { type: "number", message: "只能输入数字", trigger: "blur" },
          { validator: numTest, trigger: "blur" },
        ],
        toOccupationRatio: [
          // { type: "number", message: "只能输入数字", trigger: "blur" },
          { validator: numTest, trigger: "blur" },
        ],
        fromWaitingStopCount: [
          // { type: "number", message: "只能输入数字", trigger: "blur" },
          { validator: numTest, trigger: "blur" },
        ],
        toWaitingStopCount: [
          // { type: "number", message: "只能输入数字", trigger: "blur" },
          { validator: numTest, trigger: "blur" },
        ],
        centerLevel: [
          { required: true, message: "请选择", trigger: "change" },
          // { type: "number", message: "只能输入数字", trigger: "blur" },
          // { validator: numTest, trigger: "blur" },
        ],
        topLevel: [
          { required: true, message: "请选择", trigger: "change" },
          // { type: "number", message: "只能输入数字", trigger: "blur" },
          // { validator: numTest, trigger: "blur" },
        ],
      },
      // allDeviceTimer: "",
      // allStrategyTimer: "",
      // autoStrategyTimer: "",
      // trafficFlowTimer: "",
      // errorterminalTimer: "",
      timerCount: [],
      allDropDown: [],
    };
  },
  created() {},
  computed: {
    // ...mapGetters(["usertag", "configtag"])
    usertag() {
      return this.$store.getters.usertag;
    },
    configtag() {
      return this.$store.getters.configtag;
    },
  },

  watch: {
    usertag: {
      handler() {
        // 使用vuex中的mutations中定义好的方法来改变
        this.$router.push("/user");
      },
    },
    configtag: {
      handler() {
        // 使用vuex中的mutations中定义好的方法来改变
        this.$router.push("/config");
      },
    },
  },
  mounted() {
    // if (!this.$store.getters.role) {
    //   this.autologin();
    // }
    this.timerCount = [];
    let hastoken = getToken();
    if (hastoken) {
      this.getAllRoad();
      this.getAllStrategy();
      this.getAutoStrategy();
      this.getTrafficFlow();
      this.getErrorterminal();
      this.getAllDropDown();
      this.getAllDevices();

      this.timerCount[0] = setInterval(() => {
        this.getAllDevices();
      }, 10000);

      this.timerCount[1] = setInterval(() => {
        this.getAllStrategy();
      }, 60000);

      this.timerCount[2] = setInterval(() => {
        this.getAutoStrategy();
      }, 60000);

      this.timerCount[3] = setInterval(() => {
        this.getTrafficFlow();
      }, 60000);
      this.timerCount[4] = setInterval(() => {
        this.getErrorterminal();
      }, 60000);
      // this.$EventBus.$on("clearInterval", val => {
      //   debugger;
      //   clearInterval(this.timerCount[0]);
      //   clearInterval(this.timerCount[1]);
      //   clearInterval(this.timerCount[2]);
      //   clearInterval(this.timerCount[3]);
      //   clearInterval(this.timerCount[4]);
      //   if (val == "user") {
      //     this.$router.push("/user/");
      //   } else if (val == "config") {
      //     this.$router.push("/config/");
      //   }
      // });
    }
  },
  destroyed() {
    clearInterval(this.timerCount[0]);
    clearInterval(this.timerCount[1]);
    clearInterval(this.timerCount[2]);
    clearInterval(this.timerCount[3]);
    clearInterval(this.timerCount[4]);
    // clearTimeout(this.timerCount);
  },
  methods: {
    getCdyd(data) {
      this.trafficFlowLevelVisible = true;
      this.listLoadingDialog = true;
      this.roadData.trafficFlowLevelData = [];
      let url =
        "/lane/findTrafficFlowLevelForCamera/" +
        this.$route.params.key +
        "/" +
        data;
      this.api({
        url: url,
        method: "get",
        data: data,
      }).then((data) => {
        if (data.errorCode === 200) {
          this.listLoadingDialog = false;
          let tabledataList = data.data;
          if (tabledataList) {
            tabledataList.forEach((item, index) => {
              item.isEdit = false;
            });
            this.roadData.trafficFlowLevelData = tabledataList;
          }
        }
      });
    },
    searchByDropDownItem(dropDownItem) {
      return this.allDropDown.filter((item) => {
        if (item.key == dropDownItem) {
          return item;
        }
      });
    },
    getPic(val) {
      return this.allDevices.filter((item) => {
        if (item.code == val) {
          return item;
        }
      });
    },
    getLan(val) {
      return this.allLanes.filter((item) => {
        if (item.code == val) {
          return item;
        }
      });
    },
    autologin() {
      this.$store
        .dispatch("GetAutoToken")
        .then((data) => {
          this.loading = false;
          if (200 === data.errorCode) {
            if (!this.$store.getters.role) {
              this.$store.dispatch("GetInfo").then(() => {
                // location.reload();
              });
            }
          } else {
            this.$message.error(data.errorCode);
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },
    roadManage() {
      this.dialogRoadManageVisible = true;
      this.getRoadManage();
    },
    edit(row) {
      row.isEdit = true;
    },
    cancel(row, index) {
      row.isEdit = false;
    },
    save(row) {
      this.$refs["roadDataForm"].validate((valid) => {
        if (valid) {
          row.isEdit = false;
          let data = {
            id: row.id,
            fromAvgVolume: row.fromAvgVolume,
            toAvgVolume: row.toAvgVolume,
            fromAvgSpeed: row.fromAvgSpeed,
            toAvgSpeed: row.toAvgSpeed,
            fromOccupationRatio: row.fromOccupationRatio,
            toOccupationRatio: row.toOccupationRatio,
            fromWaitingStopCount: row.fromWaitingStopCount,
            toWaitingStopCount: row.toWaitingStopCount,
          };
          let url = "/lane/updateTrafficFlowLevelForCamera";
          this.api({
            url: url,
            method: "put",
            data: data,
          }).then((data) => {
            if (data.errorCode === 200) {
              this.listLoading = false;
              this.getCdyd("YHBL_HCDL_CQL_" + row.terminalLaneCode);
            }
          });
        }
      });
    },
    switchClick(tab, event) {
      // console.log(tab, event);
    },
    gotoStrategy() {
      this.$router.push("/strategy/" + this.$route.params.key);
    },
    gotoLog() {
      this.$router.push("/log/");
    },
    getRoadManage() {
      let url = "/lane/findByRoadId/" + this.$route.params.key;
      this.api({
        url: url,
        method: "get",
      }).then((data) => {
        if (data.errorCode === 200) {
          this.listLoading = false;
          let tabledataList = data.data ? data.data : null;
          if (tabledataList) {
            tabledataList.forEach((item, index) => {
              item.isEdit = false;
            });
            this.roadData.roadManageTableData = tabledataList;
          }
          // if (data.data) {
          //   let roadManageDataList =data.data
          //   this.roadManageTableData = data.data;
          // }
        }
      });
    },
    getAllRoad() {
      return new Promise((resolve, reject) => {
        api({
          url: "/api/road/findAll",
          method: "get",
        })
          .then((data) => {
            if (data.errorCode === 200) {
              this.road_options = data.data;
              let key = this.$route.params.key;
              this.currentroad = this.road_options.find(
                (item) => item.id == key
              ).name;
            }
            resolve(data);
          })
          .catch((err) => {
            reject(err);
          });
      });
    },
    getAllStrategy() {
      let url = "/api/strategy/main/findStrategy/" + this.$route.params.key;
      return new Promise((resolve, reject) => {
        api({
          url: url,
          method: "get",
          data: {},
        })
          .then((data) => {
            if (data.errorCode === 200) {
              this.runningStrategyTableData = data.data.runningStrategies
                ? data.data.runningStrategies
                : null;
              let nextStrategyDataList = [];
              if (data.data.nextStrategy) {
                nextStrategyDataList.push(data.data.nextStrategy);
              }

              this.nextStrategyTableData = nextStrategyDataList;

              this.allStrategyTableData = data.data.allStrategyForToday
                ? data.data.allStrategyForToday
                : null;
            }
            resolve(data);
          })
          .catch((err) => {
            reject(err);
          });
      });
    },
    getAllDevices() {
      let url = "/api/road/main/detail/" + this.$route.params.key;
      this.api({
        url: url,
        method: "get",
      }).then((data) => {
        if (data.errorCode === 200) {
          this.listLoading = false;
          if (data.data) {
            this.allDevices = data.data.devices;
            this.allLanes = data.data.lanes;
            this.YHBL_HCDL_CQL_PRES_1_pic = this.getPic(
              "YHBL_HCDL_CQL_PRES_1"
            )[0].icon;
            this.YHBL_HCDL_CQL_PRES_2_pic = this.getPic(
              "YHBL_HCDL_CQL_PRES_2"
            )[0].icon;
            this.YHBL_HCDL_CQL_PRES_3_pic = this.getPic(
              "YHBL_HCDL_CQL_PRES_3"
            )[0].icon;
            this.YHBL_HCDL_CQL_LED_2_pic = this.getPic(
              "YHBL_HCDL_CQL_LED_2"
            )[0].icon;
            this.YHBL_HCDL_CQL_LED_3_pic = this.getPic(
              "YHBL_HCDL_CQL_LED_3"
            )[0].icon;
            this.YHBL_HCDL_CQL_LED_4_pic = this.getPic(
              "YHBL_HCDL_CQL_LED_4"
            )[0].icon;
            this.YHBL_HCDL_CQL_LED_5_pic = this.getPic(
              "YHBL_HCDL_CQL_LED_5"
            )[0].icon;
            this.YHBL_HCDL_CQL_LED_6_pic = this.getPic(
              "YHBL_HCDL_CQL_LED_6"
            )[0].icon;
            this.YHBL_HCDL_CQL_LED_7_pic = this.getPic(
              "YHBL_HCDL_CQL_LED_7"
            )[0].icon;
            this.YHBL_HCDL_CQL_LED_8_pic = this.getPic(
              "YHBL_HCDL_CQL_LED_8"
            )[0].icon;
            this.YHBL_HCDL_CQL_LED_9_pic = this.getPic(
              "YHBL_HCDL_CQL_LED_9"
            )[0].icon;
            this.YHBL_HCDL_CQL_LED_10_pic = this.getPic(
              "YHBL_HCDL_CQL_LED_10"
            )[0].icon;
            this.YHBL_HCDL_CQL_LED_11_pic = this.getPic(
              "YHBL_HCDL_CQL_LED_11"
            )[0].icon;
            this.YHBL_HCDL_CQL_LED_12_pic = this.getPic(
              "YHBL_HCDL_CQL_LED_12"
            )[0].icon;
            this.YHBL_HCDL_CQL_LED_13_pic = this.getPic(
              "YHBL_HCDL_CQL_LED_13"
            )[0].icon;
            this.YHBL_HCDL_CQL_LED_14_pic = this.getPic(
              "YHBL_HCDL_CQL_LED_14"
            )[0].icon;
            this.YHBL_HCDL_CQL_LED_15_pic = this.getPic(
              "YHBL_HCDL_CQL_LED_15"
            )[0].icon;
            this.YHBL_HCDL_CQL_LED_16_pic = this.getPic(
              "YHBL_HCDL_CQL_LED_16"
            )[0].icon;
            this.YHBL_HCDL_CQL_LED_17_pic = this.getPic(
              "YHBL_HCDL_CQL_LED_17"
            )[0].icon;
            this.YHBL_HCDL_CQL_LED_18_pic = this.getPic(
              "YHBL_HCDL_CQL_LED_18"
            )[0].icon;
            this.YHBL_HCDL_CQL_LED_19_pic = this.getPic(
              "YHBL_HCDL_CQL_LED_19"
            )[0].icon;
            this.YHBL_HCDL_CQL_LED_20_pic = this.getPic(
              "YHBL_HCDL_CQL_LED_20"
            )[0].icon;
            this.YHBL_HCDL_CQL_LED_21_pic = this.getPic(
              "YHBL_HCDL_CQL_LED_21"
            )[0].icon;
            this.YHBL_HCDL_CQL_LED_22_pic = this.getPic(
              "YHBL_HCDL_CQL_LED_22"
            )[0].icon;
            this.YHBL_HCDL_CQL_LED_23_pic = this.getPic(
              "YHBL_HCDL_CQL_LED_23"
            )[0].icon;
            this.YHBL_HCDL_CQL_LED_24_pic = this.getPic(
              "YHBL_HCDL_CQL_LED_24"
            )[0].icon;
            this.YHBL_HCDL_CQL_LED_27_pic = this.getPic(
              "YHBL_HCDL_CQL_LED_27"
            )[0].icon;
            this.YHBL_HCDL_CQL_LED_28_pic = this.getPic(
              "YHBL_HCDL_CQL_LED_28"
            )[0].icon;
            this.YHBL_HCDL_CQL_LED_29_pic = this.getPic(
              "YHBL_HCDL_CQL_LED_29"
            )[0].icon;
            this.YHBL_HCDL_CQL_S_CTL_1_pic = this.getPic(
              "YHBL_HCDL_CQL_S_CTL_1"
            )[0].icon;
            this.YHBL_HCDL_CQL_S_CTL_1_txt = this.getPic(
              "YHBL_HCDL_CQL_S_CTL_1"
            )[0].name;
            this.YHBL_HCDL_CQL_S_CTL_2_pic = this.getPic(
              "YHBL_HCDL_CQL_S_CTL_2"
            )[0].icon;
            this.YHBL_HCDL_CQL_S_CTL_2_txt = this.getPic(
              "YHBL_HCDL_CQL_S_CTL_2"
            )[0].name;
            this.YHBL_HCDL_CQL_C_CTL_1_pic = this.getPic(
              "YHBL_HCDL_CQL_C_CTL_1"
            )[0].icon;
            this.YHBL_HCDL_CQL_C_CTL_1_txt = this.getPic(
              "YHBL_HCDL_CQL_C_CTL_1"
            )[0].name;
            this.YHBL_HCDL_CQL_C_CTL_2_pic = this.getPic(
              "YHBL_HCDL_CQL_C_CTL_2"
            )[0].icon;
            this.YHBL_HCDL_CQL_C_CTL_2_txt = this.getPic(
              "YHBL_HCDL_CQL_C_CTL_2"
            )[0].name;

            this.YHBL_HCDL_CQL_C_CTL_3_pic = this.getPic(
              "YHBL_HCDL_CQL_C_CTL_3"
            )[0].icon;
            this.YHBL_HCDL_CQL_C_CTL_3_txt = this.getPic(
              "YHBL_HCDL_CQL_C_CTL_3"
            )[0].name;

            this.YHBL_HCDL_CQL_C_CTL_4_pic = this.getPic(
              "YHBL_HCDL_CQL_C_CTL_4"
            )[0].icon;
            this.YHBL_HCDL_CQL_C_CTL_4_txt = this.getPic(
              "YHBL_HCDL_CQL_C_CTL_4"
            )[0].name;

            this.YHBL_HCDL_CQL_CAMERA_1_pic = this.getPic(
              "YHBL_HCDL_CQL_CAMERA_1"
            )[0].icon;
            this.YHBL_HCDL_CQL_CAMERA_1_txt = this.getPic(
              "YHBL_HCDL_CQL_CAMERA_1"
            )[0].name;
            this.YHBL_HCDL_CQL_CAMERA_2_pic = this.getPic(
              "YHBL_HCDL_CQL_CAMERA_2"
            )[0].icon;
            this.YHBL_HCDL_CQL_CAMERA_2_txt = this.getPic(
              "YHBL_HCDL_CQL_CAMERA_2"
            )[0].name;
            this.YHBL_HCDL_CQL_CAMERA_3_pic = this.getPic(
              "YHBL_HCDL_CQL_CAMERA_3"
            )[0].icon;
            this.YHBL_HCDL_CQL_CAMERA_3_txt = this.getPic(
              "YHBL_HCDL_CQL_CAMERA_3"
            )[0].name;
            this.YHBL_HCDL_CQL_CAMERA_4_pic = this.getPic(
              "YHBL_HCDL_CQL_CAMERA_4"
            )[0].icon;
            this.YHBL_HCDL_CQL_CAMERA_4_txt = this.getPic(
              "YHBL_HCDL_CQL_CAMERA_4"
            )[0].name;
            this.YHBL_HCDL_CQL_QH_1_pic = this.getPic(
              "YHBL_HCDL_CQL_QH_1"
            )[0].icon;
            this.YHBL_HCDL_CQL_QH_2_pic = this.getPic(
              "YHBL_HCDL_CQL_QH_2"
            )[0].icon;

            this.YHBL_HCDL_CQL_11_pic = this.getLan(
              "YHBL_HCDL_CQL_11"
            )[0].level;
            this.YHBL_HCDL_CQL_12_pic = this.getLan(
              "YHBL_HCDL_CQL_12"
            )[0].level;
            this.YHBL_HCDL_CQL_13_pic = this.getLan(
              "YHBL_HCDL_CQL_13"
            )[0].level;
            this.YHBL_HCDL_CQL_21_pic = this.getLan(
              "YHBL_HCDL_CQL_21"
            )[0].level;
            this.YHBL_HCDL_CQL_22_pic = this.getLan(
              "YHBL_HCDL_CQL_22"
            )[0].level;
            this.YHBL_HCDL_CQL_23_pic = this.getLan(
              "YHBL_HCDL_CQL_23"
            )[0].level;
            this.YHBL_HCDL_CQL_23_pic = this.getLan(
              "YHBL_HCDL_CQL_23"
            )[0].level;
            this.YHBL_HCDL_CQL_23_pic = this.getLan(
              "YHBL_HCDL_CQL_23"
            )[0].level;
            this.YHBL_HCDL_CQL_23_pic = this.getLan(
              "YHBL_HCDL_CQL_23"
            )[0].level;
            this.YHBL_HCDL_CQL_31_pic = this.getLan(
              "YHBL_HCDL_CQL_31"
            )[0].level;
            this.YHBL_HCDL_CQL_32_pic = this.getLan(
              "YHBL_HCDL_CQL_32"
            )[0].level;
            this.YHBL_HCDL_CQL_33_pic = this.getLan(
              "YHBL_HCDL_CQL_33"
            )[0].level;
            this.YHBL_HCDL_CQL_41_pic = this.getLan(
              "YHBL_HCDL_CQL_41"
            )[0].level;
            this.YHBL_HCDL_CQL_42_pic = this.getLan(
              "YHBL_HCDL_CQL_42"
            )[0].level;
            this.YHBL_HCDL_CQL_43_pic = this.getLan(
              "YHBL_HCDL_CQL_43"
            )[0].level;
            this.YHBL_HCDL_CQL_44_pic = this.getLan(
              "YHBL_HCDL_CQL_44"
            )[0].level;
          }
        }
      });
    },
    getAllDropDown() {
      let url = "/api/dropdown/all";
      this.api({
        url: url,
        method: "get",
      }).then((data) => {
        if (data.errorCode === 200) {
          this.listLoading = false;
          localStorage.setItem("allDropdown", JSON.stringify(data.data));
          this.allDropDown = JSON.parse(localStorage.getItem("allDropdown"));
        }
      });
    },

    getAutoStrategy() {
      let url = "/api/strategy/findActiveAutoStrategy";
      return new Promise((resolve, reject) => {
        api({
          url: url,
          method: "get",
        })
          .then((data) => {
            if (data.errorCode === 200) {
              this.autoStrategyCount = data.data ? data.data.length : 0;
              this.autoStrategyList = data.data;
            }
            resolve(data);
          })
          .catch((err) => {
            reject(err);
          });
      });
    },
    getTrafficFlow() {
      let url = "/api/road/trafficFlow";
      return new Promise((resolve, reject) => {
        api({
          url: url,
          method: "get",
        })
          .then((data) => {
            if (data.errorCode === 200) {
              this.trafficFlowCount = data.data ? data.data.length : 0;
              this.trafficFlowList = data.data;
            }
            resolve(data);
          })
          .catch((err) => {
            reject(err);
          });
      });
    },
    getErrorterminal() {
      let url = "/api/terminal/error";
      return new Promise((resolve, reject) => {
        api({
          url: url,
          method: "get",
        })
          .then((data) => {
            if (data.errorCode === 200) {
              this.errorterminalCount = data.data ? data.data.length : 0;
              this.errorterminalList = data.data;
            }
            resolve(data);
          })
          .catch((err) => {
            reject(err);
          });
      });
    },
    executeCommand(currentid, nextid, command, status) {
      this.$confirm("是否继续此操作?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.executeCommandConfirm(currentid, nextid, command, status);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消此操作",
          });
        });
    },
    executeCommandConfirm(currentid, nextid, command, status) {
      this.listLoading = true;
      if (status == "RUNNING" && command == "END") {
        this.dialogChooseStrategyVisible = true;
        let url = "/api/strategy/associated/" + currentid;
        this.api({
          url: url,
          method: "get",
        }).then((data) => {
          if (data.errorCode === 200) {
            let waitdata = data.data.waitingStrategie;
            let nextdata = data.data.nextStrategie;
            let currentdata = data.data.currentStrategy;
            if (waitdata) {
              this.waitingStrategyForm.id = waitdata.id;
              this.waitingStrategyForm.name = waitdata.name;
              this.waitingStrategyForm.desc = waitdata.desc;
              this.waitingStrategyForm.remainingTime = waitdata.remainingTime;
            }
            if (nextdata) {
              this.nextStrategyForm.id = nextdata.id;
              this.nextStrategyForm.name = nextdata.name;
              this.nextStrategyForm.desc = nextdata.desc;
              this.nextStrategyForm.nextExecuteTime = nextdata.nextExecuteTime;
            }
            if (currentdata) {
              this.currentStrategyForm.id = currentdata.id;
              this.currentStrategyForm.name = currentdata.name;
              this.currentStrategyForm.desc = currentdata.desc;
            }
          }
        });
      } else {
        let data = {};
        if (nextid) {
          data = {
            strategyId: currentid,
            command: command,
            executeStrategyId: nextid,
          };
        } else {
          data = {
            strategyId: currentid,
            command: command,
          };
        }
        this.api({
          url: "/api/strategy/execute",
          method: "post",
          data: data,
        }).then((data) => {
          if (data.errorCode === 200) {
            this.listLoading = false;
            this.$message({
              message: data.errorMessage,
              type: "success",
            });
            this.dialogChooseStrategyVisible = false;
            this.getAllStrategy();
          }
        });
      }
      //改变定时任务状态status 1:运行 2:停止
    },
    openDetails() {
      this.openDetailsVisible = true;
      this.listLoadingDialog = true;
      this.openDetailsData = [];
      this.api({
        url: "/api/device/get/all/help/" + this.$route.params.key,
        method: "get",
      }).then((data) => {
        if (data.errorCode === 200) {
          this.listLoadingDialog = false;

          this.openDetailsData = data.data;
        }
      });
    },
    parseOptionJson(value) {
      let tmp = {};
      tmp = this.topLevelOptions.find((item) => {
        return item.value === value;
      });
      return tmp.label;
    },
    handleRodeChange(val) {
      let routerdata = this.$router.resolve({
        path: "/dashboard/" + val,
      });
      window.open(routerdata.href, "_blank");
    },
    doHandle(val1, val2) {
      this.$confirm("是否继续此操作?执行" + val2, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.executeCommandConfirm(val1, null, "EXECUTE_NOW", null);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消此操作",
          });
        });
    },
  },
};
</script>
<style scoped>
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.link-top {
  width: 90%;
  height: 1px;
  border-top: solid #acc0d8 1px;
}
.dialog-footer {
  text-align: center;
  margin-bottom: 20px;
}
.el-dialog .el-dialog__body {
  max-height: 900px !important;
  min-height: 900px;
  overflow-y: auto;
}
.box {
  position: relative;
  overflow: auto;
  width: 1825;
}

.box .bg {
  height: 550px;
}
.box .YHBL_HCDL_CQL_PRES_1 {
  position: absolute;
  left: 715px;
  top: 400px;
  height: 100px;
  width: 100px;
}

.box .YHBL_HCDL_CQL_PRES_2 {
  position: absolute;
  left: 2510px;
  top: 0px;
  height: 100px;
  width: 100px;
}

.box .YHBL_HCDL_CQL_PRES_3 {
  position: absolute;
  left: 3250px;
  top: 450px;
  height: 100px;
  width: 100px;
}

.box .YHBL_HCDL_CQL_LED_2 {
  position: absolute;
  left: 460px;
  top: 233px;
  height: 40px;
  width: 40px;
  z-index: 200;
}
.box .YHBL_HCDL_CQL_LED_3 {
  position: absolute;
  left: 460px;
  top: 293px;
  height: 40px;
  width: 40px;
  z-index: 200;
}
.box .YHBL_HCDL_CQL_LED_4 {
  position: absolute;
  left: 525px;
  top: 168px;
  height: 40px;
  width: 40px;
  z-index: 200;
}
.box .YHBL_HCDL_CQL_LED_5 {
  position: absolute;
  left: 525px;
  top: 233px;
  height: 40px;
  width: 40px;
  z-index: 200;
}
.box .YHBL_HCDL_CQL_LED_6 {
  position: absolute;
  left: 525px;
  top: 293px;
  height: 40px;
  width: 40px;
  z-index: 200;
}
.box .YHBL_HCDL_CQL_LED_7 {
  position: absolute;
  left: 1350px;
  top: 168px;
  height: 40px;
  width: 40px;
  z-index: 200;
}
.box .YHBL_HCDL_CQL_LED_8 {
  position: absolute;
  left: 1350px;
  top: 233px;
  height: 40px;
  width: 40px;
  z-index: 200;
}
.box .YHBL_HCDL_CQL_LED_9 {
  position: absolute;
  left: 1350px;
  top: 293px;
  height: 40px;
  width: 40px;
  z-index: 200;
}
.box .YHBL_HCDL_CQL_LED_10 {
  position: absolute;
  left: 1418px;
  top: 168px;
  height: 40px;
  width: 40px;
  z-index: 200;
}
.box .YHBL_HCDL_CQL_LED_11 {
  position: absolute;
  left: 1418px;
  top: 233px;
  height: 40px;
  width: 40px;
  z-index: 200;
}
.box .YHBL_HCDL_CQL_LED_12 {
  position: absolute;
  left: 1418px;
  top: 293px;
  height: 40px;
  width: 40px;
  z-index: 200;
}
.box .YHBL_HCDL_CQL_LED_13 {
  position: absolute;
  left: 2243px;
  top: 168px;
  height: 40px;
  width: 40px;
  z-index: 200;
}
.box .YHBL_HCDL_CQL_LED_14 {
  position: absolute;
  left: 2243px;
  top: 233px;
  height: 40px;
  width: 40px;
  z-index: 200;
}
.box .YHBL_HCDL_CQL_LED_15 {
  position: absolute;
  left: 2243px;
  top: 293px;
  height: 40px;
  width: 40px;
  z-index: 200;
}
.box .YHBL_HCDL_CQL_LED_16 {
  position: absolute;
  left: 2308px;
  top: 168px;
  height: 40px;
  width: 40px;
  z-index: 200;
}
.box .YHBL_HCDL_CQL_LED_17 {
  position: absolute;
  left: 2308px;
  top: 233px;
  height: 40px;
  width: 40px;
  z-index: 200;
}
.box .YHBL_HCDL_CQL_LED_18 {
  position: absolute;
  left: 2308px;
  top: 293px;
  height: 40px;
  width: 40px;
  z-index: 200;
}
.box .YHBL_HCDL_CQL_LED_19 {
  position: absolute;
  left: 3373px;
  top: 168px;
  height: 40px;
  width: 40px;
  z-index: 200;
}
.box .YHBL_HCDL_CQL_LED_20 {
  position: absolute;
  left: 3373px;
  top: 233px;
  height: 40px;
  width: 40px;
  z-index: 200;
}
.box .YHBL_HCDL_CQL_LED_21 {
  position: absolute;
  left: 3373px;
  top: 290px;
  height: 40px;
  width: 40px;
  z-index: 200;
}
.box .YHBL_HCDL_CQL_LED_22 {
  position: absolute;
  left: 3373px;
  top: 364px;
  height: 40px;
  width: 40px;
  z-index: 200;
}
.box .YHBL_HCDL_CQL_LED_23 {
  position: absolute;
  left: 3438px;
  top: 168px;
  height: 40px;
  width: 40px;
  z-index: 200;
}
.box .YHBL_HCDL_CQL_LED_24 {
  position: absolute;
  left: 3438px;
  top: 233px;
  height: 40px;
  width: 40px;
  z-index: 200;
}

.box .YHBL_HCDL_CQL_LED_27 {
  position: absolute;
  left: 4215px;
  top: 193px;
  height: 40px;
  width: 40px;
  z-index: 200;
}

.box .YHBL_HCDL_CQL_LED_28 {
  position: absolute;
  left: 4215px;
  top: 236px;
  height: 40px;
  width: 40px;
  z-index: 200;
}

.box .YHBL_HCDL_CQL_LED_29 {
  position: absolute;
  left: 4215px;
  top: 278px;
  height: 40px;
  width: 40px;
  z-index: 200;
}
.box .YHBL_HCDL_CQL_S_CTL_1 {
  position: absolute;
  left: 100px;
  top: 390px;
  height: 40px;
  width: 40px;
}
.box .YHBL_HCDL_CQL_S_CTL_2 {
  position: absolute;
  left: 100px;
  top: 430px;
  height: 40px;
  width: 40px;
}
.box .YHBL_HCDL_CQL_C_CTL_1 {
  position: absolute;
  left: 100px;
  top: 470px;
  height: 40px;
  width: 40px;
}
.box .YHBL_HCDL_CQL_C_CTL_2 {
  position: absolute;
  left: 100px;
  top: 510px;
  height: 40px;
  width: 40px;
}

.box .YHBL_HCDL_CQL_C_CTL_3 {
  position: absolute;
  left: 260px;
  top: 390px;
  height: 40px;
  width: 40px;
}
.box .YHBL_HCDL_CQL_C_CTL_4 {
  position: absolute;
  left: 260px;
  top: 430px;
  height: 40px;
  width: 40px;
}
.box .YHBL_HCDL_CQL_CAMERA_1 {
  position: absolute;
  left: 480px;
  top: 70px;
  height: 40px;
  width: 40px;
}
.box .YHBL_HCDL_CQL_CAMERA_2 {
  position: absolute;
  left: 1370px;
  top: 70px;
  height: 40px;
  width: 40px;
}
.box .YHBL_HCDL_CQL_CAMERA_3 {
  position: absolute;
  left: 2262px;
  top: 70px;
  height: 40px;
  width: 40px;
}
.box .YHBL_HCDL_CQL_CAMERA_4 {
  position: absolute;
  left: 3393px;
  top: 70px;
  height: 40px;
  width: 40px;
}
.box .YHBL_HCDL_CQL_QH_1 {
  position: absolute;
  left: 2700px;
  top: 330px;
  height: 40px;
  width: 100px;
}
.box .YHBL_HCDL_CQL_QH_2 {
  position: absolute;
  left: 2700px;
  top: 367px;
  height: 40px;
  width: 100px;
}
.box .YHBL_HCDL_CQL_QH_3 {
  position: absolute;
  left: 2700px;
  top: 410px;
  height: 70px;
  width: 100px;
}
.box .road4 {
  position: absolute;
  left: 2850px;
  top: 326px;
  height: 78.75px;
  width: 331.75px;
}
</style>
